<template>
  <div>
    <!-- 新增todo -->
    <EditTodo
      v-model:todo-title="newTodo"
      @keyup.enter="addTodo"
      autofocus
      placeholder="新增今日待办"
      autocomplete="off"
    ></EditTodo>

    <!-- todo 列表 -->
    <ul>
      <TodoItem
        v-for="todo in filtersTodos"
        :key="todo.id"
        :todo="todo"
        v-model:edited-todo="editedTodo"
        @remove-todo="removeTodo"
      ></TodoItem>
    </ul>

    <!-- 过滤 -->
    <Filters :items="filterItems" v-model="visibility"></Filters>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import TodoItem from "./TodoItem.vue";
import Filters from "./Filters.vue";
import { useTodos } from "./useTodos.js";
import { useFilter } from "./useFilter.js";

export default {
  components: {
    TodoItem,
    Filters,
  },
  setup() {
    const todoState = reactive({
      newTodo: "",
      editedTodo: null, // 正在编辑的todo
    });

    const { todos, addTodo, removeTodo } = useTodos(todoState);

    const filterState = useFilter(todos);

    return {
      ...toRefs(todoState),
      ...toRefs(filterState),
      addTodo,
      removeTodo,
    };
  },
};
</script>

<style scoped></style>
